<template>
    <div class="home">
        <!-- 头部 -->
        <header>
               <div class="bj">
                    <van-nav-bar
                            title="标题"
                            left-text="返回"
                            right-text="登录"
                            left-arrow
                            >
                            <template #left>
                                <van-icon name="wap-nav" class="left"/>
                            </template>
                            <template #title>
                                    <van-search v-model="value" placeholder="djy主机" />
                            </template>
                            <template #right>
                                 <span class="right" >登录</span>
                            </template>
                    </van-nav-bar>
               </div>
        </header>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,key) in swiper" :key="key">
                <img :src="item" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 广告 -->
        <div class="guanggao">
            <img src="//img12.360buyimg.com/img/s750x205_jfs/t1/72781/19/18551/20742/628741bbE5b4d2b68/f3efa51c6a4fc7e7.jpg!q70.dpg.webp" alt="">
        </div>
        <!-- 导航栏 -->
        <nav>
            <ul class="nav">
                <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt="">
                    <p>京东超市</p>
                </li>
                 <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg" alt="">
                    <p>数码电器</p>
                </li>
                 <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg" alt="">
                    <p>京东服饰</p>
                </li>
                 <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg" alt="">
                    <p>京东生鲜</p>
                </li>
                 <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg" alt="">
                    <p>京东到家</p>
                </li>
                 <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg" alt="">
                    <p>充值缴费</p>
                </li>
                 <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg" alt="">
                    <p>物流查询</p>
                </li>
                 <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg" alt="">
                    <p>领券</p>
                </li>

                 <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg" alt="">
                    <p>领津贴</p>
                </li>
                 <li>
                    <img src="//m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg" alt="">
                    <p>PLUS会员</p>
                </li>
            </ul>
        </nav>
        <!-- 京东秒杀 -->
        <div class="jdms">
            <div class="jdms-top">
                <p>京东秒杀 <span>22</span> </p>
                <p><span>爆款轮番秒 ></span></p>
            </div>
            <ul>
                <li>
                    <img src="//m.360buyimg.com/seckillcms/s150x150_jfs/t1/115034/10/27847/67070/618cd668E8829c08e/3f243143c1a7ae27.jpg.dpg" alt="">
                    <p>￥79</p>
                </li>
                <li>
                    <img src="//m.360buyimg.com/seckillcms/s150x150_jfs/t1/164888/34/24575/372126/627dd3c6E0d749b20/7962834fb79d6fc1.jpg.dpg" alt="">
                    <p>￥6569</p>
                </li>
                 <li>
                    <img src="//m.360buyimg.com/seckillcms/s150x150_jfs/t1/90705/35/29239/276258/6289a1a3Ea7887401/cf98c613d9f4b193.jpg.dpg" alt="">
                    <p>￥2319</p>
                </li>
                 <li>
                    <img src="//m.360buyimg.com/seckillcms/s150x150_jfs/t30025/281/1324183255/116420/2f6498db/5cdcafaaN388af7c7.jpg.dpg" alt="">
                    <p>￥179</p>
                </li>
                 <li>
                    <img src="//m.360buyimg.com/seckillcms/s150x150_jfs/t1/194793/14/25195/250705/62875b1dEb969aeda/c5e21f1495107b97.jpg.dpg" alt="">
                    <p>￥45</p>
                </li>
                <li>
                    <img src="//m.360buyimg.com/seckillcms/s150x150_jfs/t1/202215/21/18814/180250/61b84de4E50e62205/05a0112928c598a4.jpg.dpg" alt="">
                    <p>￥15.9</p>
                </li>
            </ul>
        </div>
        <!-- 主题->宫格布局 -->
         <van-grid :column-num="2">
            <van-grid-item v-for="(item,key) in lists" :key="key">
                <img :src="'http://websong.wang:4000/static/product-icon/'+item.icon" alt="">
                <p>{{item.goods_name}}</p>
            </van-grid-item>
        </van-grid>
    </div>
</template>
<script> 
import {getSlid,getProductList} from "@/api/api.js"
export default {
    data() {
        return {
            swiper:[],
            lists:[],
             value: '',
        };
    },
    mounted() {
        getSlid().then((res)=>{
            if(res.data.code===1){
                for(var i=1;i<=6;i++){
                    this.swiper.push(res.data.result[i])
                    }
            }
        })
        getProductList().then((res)=>{
            if(res.data.code==1){
                this.lists=res.data.result.list
                console.log(res.data);
            }
        })
    },
    
}
</script>
<style lang="scss">
// 头部
.bj{
    position: relative;
    background: red;
    width: 100%;
    height: 12.75rem;
    border-radius: 0 0 5.625rem 5.625rem;
    .van-nav-bar{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: red;
        .van-nav-bar__title,.van-search{
            width: 100%;
            background: red !important;
        }
        .van-search{
            margin-right: 1.25rem;
            width: 14.5rem !important;
            .van-search__content{
                margin-top: 0.325rem;
                border-radius: 1.875rem;
            }
        }
    }
}
// 轮播图
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
//   nav
.nav{
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    list-style: none;
    li{
        text-align: center;
        width: 19%;
        img{
            width: 60%;
        }
        p{
            font-size: 0.795rem;
        }
    }
}
// guanggao
.guanggao{
    margin-top: 0.625rem;
    width: 100%;
    img{
        width: 100%;
    }
}
// 京东秒杀
.jdms{
    width: 100%;
    .jdms-top{
        width: 100%;
        display: flex;
        justify-content:space-between;
         font-size: 0.6rem;
         p{
             span{
                 color: red;
                 margin-right: 0.625rem;
             }
         }
         p:first-child{
             margin-left: 0.625rem;
         }
    }
    ul{
        padding: 0 .3125rem;
        box-sizing: border-box;
        display: flex;
        justify-content:space-around;
        list-style: none;
       
        li{
            text-align: center;
            width: 16%;
            img{
                width: 100%;
            }
            p{
                color: red;
                font-size: 0.8rem;
            }
        }
    }
}
  .my-swipe{
      margin: 0 auto;
      position: absolute;
      border-radius: 0 0 .625rem .625rem;
      top: 8%;
      left: 2%;
      width: 96%;
      height: 9.5rem;
      img{
          width: 100%;
          height: 100%;
      }
  }
.left{
        color: #ffffff !important;
        font-size: 1.6rem;
    }
.right{
        color: #ffffff !important;
        font-size: 1rem;
}
.van-grid{
   width: 100%;
    .van-grid-item{
        width: 50%;
        img{
            width: 100%;
        }
        p{
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
</style>>



